<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
        <link rel="stylesheet" href="../../src/themes/default/nexBase.css">
        <link rel="stylesheet" href="../../src/themes/default/panel/nexPanel.css">
        <link rel="stylesheet" href="../css/examples.css">
        <script src="../../src/jquery-1.8.0.min.js"></script>
        <script src="../../src/nex/jquery.easing.1.3.js"></script>
        <script src="../../src/nex/jquery.mousewheel.js"></script>
        <script src="../../src/nex/jquery.nexBase.js"></script>
        <script src="../../src/nex/jquery.nexAjax.js"></script>
        <script src="../../src/nex/jquery.nexHtml.js"></script>
    </head>
    <body>
        <div class="container">
            <div id="base" style="position:relative; ">
            </div>
        </div>
        <script type="text/javascript">
			var html1,html2,html3,a1,a2;
			$(function(){
				var BHtml = Nex.extend( 'BHtml','html' );
				html1 = Nex.Create('BHtml',{
					renderTo : '#base',
					title : '基本面板',
					tabIndex : 5,
					padding : 5,
					onCreate : function(){
						var self = this;
						self.showLoading();
						a1 = Nex.Create('ajax',{
							url : function( data,s,f ){
								setTimeout( function(){
									s( 'Hello World2' );
								},2000 );
							},
							onError : function(){
								console.log( arguments,'error?' )	
							}
						}).done(function(a,b,c){
							self.add('<br>1>'+a);	
						}).complete(function(){
							self.add('<br>loadComplete');		
						}).fail(function(){
							self.add('error or abort');	
						});
						a2 = Nex.Create('ajax',{
							url : function( data,s,f ){
								setTimeout( function(){
									s( 'Hello World4' );
								},4000 );
							}
						}).done(function(a,b,c){
							self.add('<br>2>'+a);	
						}).complete(function(){
							self.add('<br>loadComplete');		
						});
						Nex.when( a1,a2 ).then( function(){
							console.log( arguments );	
						},function(){
							console.log( arguments );	
						} ).always(function(){
							self.hideLoading();	
						});
					}
				});	
			});
		</script>
    </body>
</html>
